<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>新冠疫苗预约网</title>
	<link href=C:\新冠疫苗预约网\public\css\bootstrap.min.css rel="stylesheet">
	<script src="C:\新冠疫苗预约网\public\js\jquery.min.js"></script>
	<script src="C:\新冠疫苗预约网\public\js\bootstrap.min.js"></script>
	<style>
		.yuyue{
			position: relative;
			margin-top: 20px;
			cursor: pointer;
		}
		.yuyue>span{
			position: absolute;
			left: 50px;
			top: 40px;
			color:#48adc6;
			font-size: 24px;
		}
		#bottom{
			background: #999;
			height: 50px;
			line-height: 50px; 
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="container-fluid">
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="/">疫苗预约网</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="/">预约首页</a></li>
						<li><a href="/info">查看预约</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right"> 
						<li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li> 
					</ul> 
				</div>
			</div>
		</nav>

		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="C:\新冠疫苗预约网\public\img\banner1.jpg" alt="First slide">
				</div>
				<div class="item">
					<img src="C:\新冠疫苗预约网\public\img\banner2.png" alt="Second slide">
				</div>
				<div class="item">
					<img src="C:\新冠疫苗预约网\public\img\banner3.jpg" alt="Third slide">
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>

		<div class="row">
			<div class="col-sm-6">
				<h3>新冠病毒介绍</h3>
				<p>
					新型冠状病毒肺炎是一种急性感染性肺炎，其病原体是一种先前未在人类中发现的新型冠状病毒，即2019新型冠状病毒，新冠病毒可在复制过程中不断适应宿主而产生突变。2020年2月7日，国家卫健委决定将“新型冠状病毒感染的肺炎”命名为“新型冠状病毒肺炎”，简称“新冠肺炎”。2月11日，世界卫生组织（WHO）将其英文名称为Corona
					Virus Disease 2019（COVID-19）。
				</p>
				<p>
					患者初始症状多为发热、乏力和干咳，并逐渐出现呼吸困难等严重表现，部分患者以嗅觉、味觉减退或丧失等为首发症状。多数患者预后良好，部分严重病例可出现急性呼吸窘迫综合征或脓毒症休克，甚至死亡。目前，缺乏针对病原体的有效抗病毒药物，以隔离治疗、对症支持治疗为主。
				</p>
				<h3>
					新冠疫苗接种流程
				</h3>
				<p>
				<ul class="list-group">
					<li class="list-group-item">第一步：做好个人防护，主动提供
						健康状况，携带身份证</li>
					<li class="list-group-item">第二步：要认真阅读并如实填写疫
						苗接种知情同意书</li>
					<li class="list-group-item">第三步：接种完毕需在接种点留观
						30分钟</li>
					<li class="list-group-item">第四步：接种疫苗之后要保证接种部位
						的清洁，当天不要见水</li>
				</ul>
				</p>
			</div>
			<div class="col-sm-6">
				<p class="yuyue" data-toggle="modal" data-target="#myModal">
					<span>快速预约</span>
					<img src="public\img\yuyue.jpg" alt="">
				</p>
				<p class="yuyue" onclick="jump()">
					<span>查看预约</span>
					<img src="public\img\chakan.jpg" alt="">
				</p>
			</div>
		</div>
		<div class="row" id="bottom">
			<div class="col-sm-12">
				底部版权信息
			</div>
		</div>
	</div>
	<!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">预约信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
						  <label class="col-sm-2 control-label">姓名</label>
						  <div class="col-sm-10">
							<input type="text" class="form-control" id="uname" placeholder="请输入姓名">
						  </div>
						</div>
						
						<div class="form-group">
							<label  class="col-sm-2 control-label">联系电话</label>
							<div class="col-sm-10">
							  <input type="text" class="form-control" id="tel" placeholder="请输入联系电话">
							</div>
						  </div>
						<div class="form-group">
						  <label  class="col-sm-2 control-label">预约时间</label>
						  <div class="col-sm-10">
							<input type="date" min="2021-6-1" class="form-control" id="time">
						  </div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">接种地点</label>
							<div class="col-sm-10">
								<!-- 使用jqeury动态生成下拉选项 -->
								<select class="form-control" id="address">
									
								</select>
							</div>
						</div>
						
					  </form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="send()">预约</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
</body>
<script>
	function jump(){//跳转至预约详情
		location.href="/info"
	}
	function dateInit(){
		var date=new Date();
		var year=date.getFullYear();
		var month=date.getMonth()+1;
		var day=date.getDate();
		month=month>9?month:"0"+month;
		day=day>9?day:"0"+day;
		var mindate=year+"-"+month+"-"+day;
		$("#time").val(mindate);
		$("#time").attr({"min":mindate})
		console.log(mindate)
	}
	function selectInit(){
		$.ajax({
			url:"/getHospitalSelect",
			success(ret){
				console.log(ret)
				
				let html="";
				for(let i=0;i<ret.length;i++){
					html+=`<option value="`+ret[i].hospital+`">`+ret[i].hospital+`</option>`
				}
				$("#address").html(html)
			}
		})
	}
	selectInit()//初始化下拉接种医院
	dateInit();//设置日期表单的最小值为当天

	function send(){
		//获取用户预约数据
		var uname=$("#uname").val();
		var tel=$("#tel").val();
		var time=$("#time").val();
		var address=$("#address").val();
		var namereg=/^[\u4e00-\u9fa5]{0,}$/;
        var telreg=/(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
		if(namereg.test(uname) && telreg.test(tel) && time.length>0 && address.length>0){//验证用户数据数据是否符合要求
			$.ajax({//使用ajax发送用户数据，进行预约
			url:"/yuyue",
			method:"post",
			data:{
				uname:uname,
				tel:tel,
				time:time,
				address:address
			},
			success(ret){
				console.log(ret)
				alert(ret.msg)
				
			}
		})
		$("#myModal").modal('hide')//关闭模态框
		}else{
			alert("输入信息格式有误，请检查")
			$("#myModal").modal('hide')//关闭模态框
		}
		
		
	}
	
</script>
</html>